;(function(undefined) {
    "use strict"
    var _global;

    //判断是否为 数组
    function isArray(o){
        return Object.prototype.toString.call(o)=='[object Array]';
    }
    //随机数
    function getRandomNumber(a,b) {
        return Math.round(Math.random()*(b- a) + a)
    }
    //获取随机图片
    function getRandomImg(imgArr) {
        return imgArr[getRandomNumber(0,imgArr.length-1)]
    }
    //判断 是否处于动画状态
    function ifAnimate(ele) {
        if(ele.is(":animated")){
            return true
        }else{
            return false
        }
    }
    //获取元素的left值
    function getEleCssLeft($ele) {
        return parseInt($ele.css('left'));
    }
    
    var RotateVerify = function (ele,opt) {
        this.$ele = $(ele);
        //默认参数
        this.defaults = {
            initText:'滑动将图片转正',
            slideImage:'',
            slideAreaNum:10,
            getSucessState:function(){
				
            }
        }
        this.settings = $.extend({}, this.defaults, opt);
        this.init();
    }
    RotateVerify.prototype = {
        constructor: this,
        init:function () {
			this.verifyState = false;
			this.disLf = 0;
            this.initDom();
            this.initCanvasImg();
            this.initMouse();
            this._touchstart();
            this._touchend();
        },
        initDom:function () {
          
			this.statusBg = this.$ele.find('.statusBg');
            this.$slideDragWrap = this.$ele.find('.slideDragWrap');
            this.$slideDragBtn = this.$ele.find('.slideDragBtn');
			this.rotateCan = this.$ele.find('.rotateCan');
			this.cTipsTxt = this.$ele.find('.cTipsTxt');
			this.controlBorWrap = this.$ele.find('.controlBorWrap');
			this.xPos = this.rotateCan[0].width/2;
			this.yPos = this.rotateCan[0].height/2;
			this.aveRot = Math.round((360/(this.$slideDragWrap.width() - this.$slideDragBtn.outerWidth())) * 100 )/100;
			// window.$slideDragWrap = this.$slideDragWrap
			// console.log(this.$slideDragWrap)
			// console.log(this.$slideDragWrap.width(),this.$slideDragBtn.outerWidth(),this.aveRot)
			this.rotateImgCan = this.rotateCan[0].getContext('2d');
            this.slideImage = document.createElement('img');
			this.setAttrSrc();
        },
        initCanvasImg:function () {
			 this.randRot = getRandomNumber(30,270);
			 this.sucLenMin = (360 - this.settings.slideAreaNum - this.randRot) * (this.$slideDragWrap.width() - this.$slideDragBtn.width())/360;
			 this.sucLenMax = (360 + this.settings.slideAreaNum - this.randRot) * (this.$slideDragWrap.width() - this.$slideDragBtn.width())/360;
			 this.disLf = 0;
			 this.initImgSrc();
        },
		initImgSrc:function(){
			var _this = this;
			_this.slideImage.src = _this.slideImage.getAttribute('data-src');
			_this.setAttrSrc();
			_this.slideImage.onload = function(){
				_this.slideImage.style.width = _this.xPos * 2 + 'px';
				_this.slideImage.style.height = _this.yPos * 2 + 'px';
				_this.drawImgCan();
			}
		},
		drawImgCan:function(val){
			var _this = this;
			_this.rotateImgCan.beginPath();
			_this.rotateImgCan.arc( _this.xPos, _this.yPos, _this.xPos, 0, 360 * Math.PI / 180, false );
			_this.rotateImgCan.closePath();
			_this.rotateImgCan.clip();
			_this.rotateImgCan.save();
			_this.rotateImgCan.clearRect(0,0,_this.xPos * 2,_this.yPos * 2);
			_this.rotateImgCan.translate(_this.xPos, _this.yPos);
			_this.rotateImgCan.rotate(this.randRot * Math.PI / 180 + _this.disLf * _this.aveRot * Math.PI / 180);
			_this.rotateImgCan.translate(-_this.xPos, -_this.yPos);
			_this.rotateImgCan.drawImage( _this.slideImage, 0, 0, _this.xPos*2, _this.yPos*2);
			_this.rotateImgCan.restore();
		},
        initMouse:function () {
            var _this = this ;
            var ifThisMousedown = false;
            _this.$slideDragBtn.on('mousedown',function (e) {
                if(_this.verifyState){
                    return false;
                }
                if(_this.dragTimerState){
                    return false;
                }
                if(ifAnimate(_this.$slideDragBtn)){
                    return false;
                }
                ifThisMousedown = true;
                var positionDiv = $(this).offset();
                var distenceX = e.pageX - positionDiv.left;
                var disPageX = e.pageX;
                _this.$slideDragBtn.addClass('control-btn-active');
				_this.controlBorWrap.addClass('control-bor-active');
                $(document).mousemove(function (e) {
                    if(!ifThisMousedown){
                        return false;
                    }
                    var x = e.pageX - disPageX;
                    if(x<0){
                        x=0;
                    }else if(x >=(_this.$slideDragWrap.width()-_this.$slideDragBtn.outerWidth())){
						x = _this.$slideDragWrap.width()-_this.$slideDragBtn.outerWidth();
                    }
					_this.$slideDragBtn.css({
						'left':x + 'px'
					})
					_this.controlBorWrap.css({
						'width':x + _this.$slideDragBtn.width() + 'px'
					})
					_this.disLf = x;
					_this.drawImgCan();
                    e.preventDefault();
                })
            });
            $(document).on('mouseup',function(){
                if(!ifThisMousedown){
                    return false;
                }
                ifThisMousedown = false;
                if(_this.verifyState){
                    return false;
                }
                $(document).off('mousemove');
                _this.$slideDragBtn.removeClass('control-btn-active');
				_this.controlBorWrap.removeClass('control-bor-active');
                if(_this.sucLenMin <= _this.disLf && _this.disLf <= _this.sucLenMax){
                	_this.$slideDragBtn.addClass('control-btn-suc');
					_this.controlBorWrap.addClass('control-bor-suc');
					_this.statusBg.fadeIn();
					_this.statusBg.addClass('icon-dagou');
					_this.verifyState = true;
					_this.cTipsTxt.text("");
					if(_this.settings.getSuccessState){
					    _this.settings.getSuccessState(_this.verifyState);
					}
                }else{
                	_this.$slideDragBtn.addClass('control-btn-err');
					_this.controlBorWrap.addClass('control-bor-err');
                	_this.$slideDragWrap.addClass('control-horizontal');
					_this.dragTimerState = true;
					_this.verifyState = false;;
					_this.statusBg.fadeIn();
					_this.statusBg.addClass('icon-guanbi1');
                	_this.$slideDragBtn.delay(700).animate({
                		left:'0px'
                	},function(){
						_this.dragTimerState = false;
                		_this.$slideDragWrap.removeClass('control-horizontal');
                		_this.$slideDragBtn.removeClass('control-btn-err');
						_this.statusBg.removeClass('icon-guanbi1');
						_this.statusBg.fadeOut();
						_this.refreshSlide();
                	})
					_this.controlBorWrap.delay(700).animate({
						width:_this.$slideDragBtn.width() + 'px'
					},function(){
						_this.controlBorWrap.removeClass('control-bor-err');
					});
                }
            });
        },
        _touchstart:function(){
            var _this = this;
			_this.$slideDragBtn.on('touchstart',function(e){
                _this.$slideDragBtn.css('pointer-events','none');
                setTimeout(function(){_this.$slideDragBtn.css('pointer-events','all')},400)
                if(_this.dragTimerState || ifAnimate(_this.$slideDragBtn) || _this.verifyState){
                    return false;
                }
                if(getEleCssLeft(_this.$slideDragBtn) == 0){
                    _this.touchX = e.originalEvent.targetTouches[0].pageX;
					_this.$slideDragBtn.addClass('control-btn-active');
					_this.controlBorWrap.addClass('control-bor-active');
                    _this._touchmove();
                }
            })
        },
        _touchmove:function(){
            var _this = this;
            _this.$slideDragBtn.on('touchmove',function(e){
                e.preventDefault();
                if(_this.dragTimerState || ifAnimate(_this.$slideDragBtn)){
                    return false;
                }else{
                    var x = e.originalEvent.targetTouches[0].pageX - _this.touchX;
					if(x<0){
					    x=0;
					}else if(x >=(_this.$slideDragWrap.width()-_this.$slideDragBtn.outerWidth())){
						x = _this.$slideDragWrap.width()-_this.$slideDragBtn.outerWidth();
					}
					_this.$slideDragBtn.css({
						'left':x + 'px'
					})
					_this.controlBorWrap.css({
						'width':x + _this.$slideDragBtn.width() + 'px'
					})
					_this.disLf = x;
					_this.drawImgCan();
                }
            })
        },
        _touchend:function(){
            var _this = this;
            _this.$slideDragBtn.on('touchend',function(){
                _this.$slideDragBtn.off('touchmove');
				_this.$slideDragBtn.removeClass('control-btn-active');
				_this.controlBorWrap.removeClass('control-bor-active');
				if((_this.sucLenMin) <= _this.disLf && _this.disLf <= (_this.sucLenMax)){
					_this.verifyState = true;
					_this.$slideDragBtn.addClass('control-btn-suc');
					_this.controlBorWrap.addClass('control-bor-suc');
					_this.statusBg.fadeIn();
					_this.statusBg.addClass('icon-dagou');
					_this.cTipsTxt.text("");
					if(_this.settings.getSuccessState){
					    _this.settings.getSuccessState(_this.verifyState);
					}
				}else{
					if(!ifAnimate(_this.$slideDragBtn)){
					    _this.dragTimerState = true;
						_this.verifyState = false;
						_this.statusBg.fadeIn();
						_this.statusBg.addClass('icon-guanbi1');
					    _this.$slideDragBtn.addClass('control-btn-err');
						_this.controlBorWrap.addClass('control-bor-err');
					    _this.$slideDragWrap.addClass('control-horizontal');
					    _this.$slideDragBtn.delay(700).animate({
					    	left:'0px'
					    },function(){
					    	_this.$slideDragWrap.removeClass('control-horizontal');
					    	_this.$slideDragBtn.removeClass('control-btn-err');
							_this.statusBg.removeClass('icon-guanbi1');
							_this.statusBg.fadeOut();
					    	_this.dragTimerState = false;
					    	_this.refreshSlide();
					    })
						_this.controlBorWrap.delay(700).animate({
							width:_this.$slideDragBtn.width() + 'px'
						},function(){
							_this.controlBorWrap.removeClass('control-bor-err');
						});
					}else{
					    return false;
					}
				}
            })
        },
		setAttrSrc:function(){
			if(isArray(this.settings.slideImage)){
			    this.slideImageSrc = getRandomImg(this.settings.slideImage);
			}else{
			    this.slideImageSrc = this.settings.slideImage;
			}
			this.slideImage.setAttribute("data-src",this.slideImageSrc);
		},
        refreshSlide:function(){
            var _this = this;
			_this.initCanvasImg();
        },
		resetSlide:function(){
			var _this = this;
			_this.$slideDragBtn.css({
				left:'0px'
			})
			_this.controlBorWrap.css({
				width:_this.$slideDragBtn.width() + 'px'
			})
			_this.controlBorWrap.removeClass('control-bor-suc');
			_this.dragTimerState = false;
			_this.verifyState = false;;
			_this.$slideDragBtn.removeClass('control-btn-suc');
			_this.$slideDragWrap.removeClass('control-horizontal');
			_this.statusBg.fadeOut();
			_this.statusBg.removeClass('icon-dagou');
			_this.cTipsTxt.text(_this.settings.initText);
			_this.refreshSlide();
		}
    }
	var inlineCss = '*{margin:0;padding:0;box-sizing:border-box;}.rotateverify-contaniner{margin:0 auto;}@-webkit-keyframes rotateverifyHorizontal{0%{-webkit-transform:translate(0px,0);-ms-transform:translate(0px,0);transform:translate(0px,0)}10%,30%,50%,70%,90%{-webkit-transform:translate(-1px,0);transform:translate(-1px,0)}20%,40%,60%,80%{-webkit-transform:translate(1px,0);transform:translate(1px,0)}100%{-webkit-transform:translate(0px,0);transform:translate(0px,0)}}@-moz-keyframes rotateverifyHorizontal{0%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);transform:translate(0px,0)}10%,30%,50%,70%,90%{-webkit-transform:translate(-1px,0);-moz-transform:translate(-1px,0);transform:translate(-1px,0)}20%,40%,60%,80%{-webkit-transform:translate(1px,0);-moz-transform:translate(1px,0);transform:translate(1px,0)}100%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);transform:translate(0px,0)}}@keyframes rotateverifyHorizontal{0%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);transform:translate(0px,0)}10%,30%,50%,70%,90%{-webkit-transform:translate(-1px,0);-moz-transform:translate(-1px,0);transform:translate(-1px,0)}20%,40%,60%,80%{-webkit-transform:translate(1px,0);-moz-transform:translate(1px,0);transform:translate(1px,0)}100%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);transform:translate(0px,0)}}.rotateverify-contaniner .control-horizontal{-webkit-animation:rotateverifyHorizontal .6s .2s ease both;-moz-animation:rotateverifyHorizontal .6s .2s ease both;animation:rotateverifyHorizontal .6s .2s ease both}.rotateverify-contaniner .rotate-can-wrap{position:relative;}.rotateverify-contaniner .status-bg{width:100%;height:100%;position:absolute;top:0;left:0;background-color:rgba(0,0,0,.3);background-repeat:no-repeat;background-position:center center;border-radius:100%;display:none;}.rotateverify-contaniner .status-bg.icon-dagou{background-image:url();}.rotateverify-contaniner .status-bg.icon-guanbi1{background-image:url();}.rotateverify-contaniner .control-wrap{position:relative;height:40px;clear:both;border-radius:42px;margin-top:45px;background-color:#f7f7f7;}.rotateverify-contaniner .control-wrap .control-tips{position:relative;width:100%;height:100%;}.rotateverify-contaniner .c-tips-txt{height:40px;line-height:40px;position:absolute;width:100%;text-align:center;top:0;left:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.rotateverify-contaniner .control-btn{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:40px;border:1px solid #e0e0e0;background-color:#fff;}.rotateverify-contaniner .control-bor-wrap{position:absolute;left:0;top:0;width:40;height:40px;border-radius:40px;border:1px solid transparent;}.rotateverify-contaniner .control-bor-active{border:1px solid #1a91ed;}.rotateverify-contaniner .control-bor-err{border:1px solid #e01116;}.rotateverify-contaniner .control-bor-suc{border:1px solid limegreen;}.rotateverify-contaniner .control-btn-active{background:#1a91ed;}.rotateverify-contaniner .control-btn-err{background:#e01116;}.rotateverify-contaniner .control-btn-suc{background-color:limegreen;}.rotateverify-contaniner .control-btn-ico{display:block;width:20px;height:20px;background:url() no-repeat center center;background-size:100% 100%;margin:10px;}.rotateverify-contaniner .control-btn-active .control-btn-ico{background:url() no-repeat center center;background-size:100% 100%;}.rotateverify-contaniner .control-btn-err .control-btn-ico{background:url() no-repeat center center;background-size:100% 100%;}.rotateverify-contaniner .control-btn-suc .control-btn-ico{background:url() no-repeat center center;background-size:100% 100%;}'
	var styleObj = $(
		'<style type="text/css">'+ inlineCss +'</style>'
	)
	// $('head').prepend(styleObj);
    _global = (function(){ return this || (0, eval)('this'); }());
    if (typeof module !== "undefined" && module.exports) {
        module.exports = RotateVerify;
    } else if (typeof define === "function" && define.amd) {
        define(function(){return RotateVerify;});
    } else {
        !('RotateVerify' in _global) && (_global.RotateVerify = RotateVerify);
    }
}());